<template>
  <a-modal
    class="preview-modal"
    :visible="previewVisible"
    :maskClosable="false"
    :destroyOnClose="true"
    :keyboard="false"
    :footer="null"
    @cancel="closeModal(false)"
    width="423px"
  >
    <a-spin tip="Loading..." :spinning="tableLoading">
      <div class="preview_box">
        <div class="header_wrap">
          <h1 class="my-header">预览</h1>
        </div>
        <div class="banner">
          <a-carousel autoplay>
            <div
              v-for="(l, i) in formData.coverImages"
              :key="i"
              class="bannerImg"
              :style="{
                background: `url(${l}) no-repeat 50% 50% / cover`,
              }"
            ></div>
          </a-carousel>
        </div>
        <div class="activeName">
          {{ formData.name }}
        </div>
        <a-divider />
        <div class="activeInfo">
          <div class="signUp">
            <div class="title">
              {{ formData.signUpAlias || "报名费用" }}
            </div>
            <div class="num">
              {{
                formData.signUp ? ((formData.signUp * 1) / 100).toFixed(2) : ""
              }}元
            </div>
          </div>

          <div class="commission">
            <div class="title">分销佣金</div>
            <div class="num">
              {{
                formData.commission
                  ? ((formData.commission * 1) / 100).toFixed(2)
                  : ""
              }}元
            </div>
          </div>

          <div class="signEndDate">
            <div class="title">报名截止时间</div>
            <div class="num">
              {{ formData.signEndDate || "" }}
            </div>
          </div>
          <div class="address" style="margin-top: 7px">
            <div class="title" style="line-height: 1.5">活动地址</div>
            <div class="num" style="line-height: 1.5">
              {{
                formData.releaseShopList
                  ? formData.releaseShopList.length > 0
                    ? `支持${formData.releaseShopList.length}个门店`
                    : formData.address
                  : ""
              }}
            </div>
          </div>
        </div>

        <div class="blank"></div>

        <div class="activeName">活动须知</div>
        <a-divider />
        <div class="activeInfo">
          <div class="describtion">{{ formData.describtion || "" }}</div>
        </div>
        <div class="blank"></div>
        <div class="activeName">详细规则</div>
        <!-- <a-divider /> -->
        <!-- <div v-html="formData.ruleImages" class="ruleImages"></div> -->
        <div v-for="(l, i) in formData.ruleImages" :key="i" class="ruleImg">
          <img :src="l" alt="" />
        </div>
      </div> </a-spin
  ></a-modal>
</template>
<script>
export default {
  name: "preview",
  props: {
    previewVisible: {
      // 是否显示弹窗
      type: Boolean,
      default: false,
    },
    //活动Id
    previewId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {},
      tableLoading: false,
    };
  },
  watch: {
    previewVisible(y) {
      if (y) {
        this.getActivityInfo({ id: this.previewId });
      } else {
        this.formData = {};
      }
    },
  },
  methods: {
    closeModal(bool) {
      this.$emit("cancel", bool);
    },
    //获取活动详情
    async getActivityInfo(params) {
      this.tableLoading = true;
      let res = await this.$get("sale/card/id", params);
      if (res && res.returnCode == 1000) {
        this.formData = res.dataInfo;
        this.formData.coverImages = this.formData.coverImages.split(",");
        this.formData.ruleImages = this.formData.ruleImages.split(",");
        this.tableLoading = false;
      } else {
        this.tableLoading = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.header_wrap {
  background: url("~@images/shop/top.png");
  height: 64px;
  width: 375px;
  position: relative;
  .my-header {
    font-family: PingFangSC-Medium;
    font-size: 16px;
    font-weight: 700;
    color: #191919;
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;

    // width: 100%;
    // height: 40px;
    // line-height: 40px;
    // text-align: center;
  }
}
.preview_box {
  box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);
}
.banner {
  height: 220px;
  .bannerImg {
    width: 100%;
    height: 220px;
  }
}

.activeName {
  line-height: 50px;
  padding: 0 15px;
  font-family: PingFangSC-Medium;
  font-size: 16px;
  color: #191919;
  letter-spacing: 0;
  font-weight: 500;
}
/deep/.ant-divider-horizontal {
  margin: 0;
}
.activeInfo {
  padding: 5px 15px;
}
.signUp,
.commission,
.signEndDate,
.describtion,
.address {
  display: flex;
  justify-content: space-between;
  line-height: 40px;
  font-weight: 500;
  .title {
    width: 40%;
  }
  .num {
    width: 60%;
    text-align: right;
  }
}
.blank {
  width: 100%;
  height: 25px;
  background: #f2f2f2;
}
.ruleImages {
  width: 100%;
  overflow-x: hidden;
}
/deep/.ant-modal-body {
  max-height: 700px;
}
.ruleImg {
  width: 100%;
  img {
    width: 100%;
  }
}
</style>